<template>
  <view class="favorite-item">
    <image :src="item.image" class="item-image"></image>
    <view class="item-info">
      <text class="item-title">{{ item.title }}</text>
      <text class="item-meta">
        <template v-if="item.type === 'course'">
          {{ item.instructor }} | ¥{{ item.price }}
        </template>
        <template v-if="item.type === 'video'">
          {{ item.author }} | {{ item.likes }} 赞
        </template>
        <template v-if="item.type === 'product'">
          销量 {{ item.sales }} | ¥{{ item.price }}
        </template>
      </text>
      <text class="item-time">{{ item.addTime }}</text>
    </view>
    <view class="remove-btn" @click="$emit('remove', item.id)">
      <text class="icon">✕</text>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.favorite-item {
  display: flex;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 16rpx;
}
.item-image {
  width: 160rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.item-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-meta {
  font-size: 24rpx;
  color: #999;
}
.item-time {
  font-size: 22rpx;
  color: #ccc;
}
.remove-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6b35;
  font-size: 30rpx;
}
</style>
